মাউস আনুন !
ড্রপডাউন
ইমেজ ড্রপডাউনঃ
একটি বেসিক ড্রপডাউন তৈরি করিঃ
kt_satt_skill_example_id=1176
এইচটিএমএলঃ
হোভার করে ড্রপডাউন কন্টেন্ট প্রদর্শনের জন্য একটি এলিমেন্ট ব্যবহার করতে হয়। যেমনঃ <span>
অথবা <button>
এলিমেন্ট।
ড্রপডাউন কন্টেন্ট রাখার জন্য কন্টেইনার হিসেবে একটি <div>
এলিমেন্ট ব্যবহার করি।
সিএসএসঃ.dropdown
ক্লাসে position:relative
ব্যবহার করা হয়েছে। এর কারণ আমরা position:absolute
ব্যবহার করে কন্টেন্টগুলোকে বাটনের নিচে দেখাতে চাই।
.dropdown-content
ক্লাসটির মধ্যে ড্রপডাউন কন্টেন্টগুলো রয়েছে এবং ইহা ডিফল্ট আকারে অদৃশ্য থাকে এবং মাউস নিয়ে গেলে শুধু দেখা যাবে। min-width
160px সেট করা হয়েছে।
ড্রপডাউন আইটেমকে একটি কার্ডের মত দেখানোর জন্য আমরা সিএসএস(৩) এর box-shadow
প্রোপার্টি ব্যবহার করেছি।
:hover
সিলেক্টরটি ব্যবহার করা হয়েছে ড্রাপডাউন বাটনের উপর মাউস নিয়ে গেলে ড্রপডাউন আইটেমকে প্রদর্শনের জন্য।
এই উদাহরণটি আগের উদাহরণের মতই, শুধু ড্রপডাউন কন্টেন্টে লিঙ্ক যোগ করা হয়েছেঃ
kt_satt_skill_example_id=1180
আপনি যদি ড্রপডাউন কন্টেন্টকে ড্রপডাউন বাটনের ডান থেকে শুরু করতে চান তাহলে right: 0;
সেট করে দিনঃ
kt_satt_skill_example_id=1186
common.read_more